<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="Normalize.css">
    <link rel="stylesheet" href="JDindexCss.css">
    <link rel="stylesheet" href="swiper-bundle.min.css">
    <script src="js/swiper-bundle.min.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
<!-- 第一行 导航栏 标签-->
<div class="head">
    <ol>
        <li><img src="images/close.png" alt=""></li>
        <li><img src="images/logo.png" alt=""></li>
        <li>打开京东APP，购物更轻松</li>
        <li><a href="#">立即打开</a></li>
    </ol>
</div>
<!-- 搜索栏-->
<div class="f">
    <div class="searchBar">
        <div class="left"><img src="images/s-btn.png" alt=""></div>
        <div class="middle">
            <!--        middle  中间-->

                <div class="JD"></div>

                    <div class="JD1"></div>

            <div class="magnifier">
                <!--            magnifier  放大镜-->
            </div>
        </div>
        <div class="right"><a href="#">登陆</a></div>
    </div>
</div>

<!--主要内容-->
<div class="main">

    <!-- turnChart   轮番图-->
    <div class="turnChart">
<!--        <a href="#"><img src="img/banner.dpg" alt=""></a>-->
        <!-- Swiper -->
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><a href="#"><img src="img/banner.dpg" alt=""></a></div>
                <div class="swiper-slide"><a href="#"><img src="img/banner1.jpg" alt=""></a></div>
                <div class="swiper-slide"><a href="#"><img src="img/banner2.jpg" alt=""></a></div>
                <div class="swiper-slide"><a href="#"><img src="img/banner3.jpg" alt=""></a></div>
                <div class="swiper-slide"><a href="#"><img src="img/banner4.jpg" alt=""></a></div>
                <div class="swiper-slide"><a href="#"><img src="img/banner5.jpg" alt=""></a></div>
                <div class="swiper-slide"><a href="#"><img src="img/banner6.jpg" alt=""></a></div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-pagination"></div>
        </div>
    </div>

    <div class="Recommended">
        <!--  Recommended  精品推荐      -->
        <!--    我们仔细分析的话和发现其实这个精品推荐的大图片图是由3个小图片组合起来的 -->
        <div><a href="#"><img src="img/pic11.dpg" alt=""></a></div>
        <div><a href="#"><img src="img/pic22.dpg" alt=""></a></div>
        <div><a href="#"><img src="img/pic33.dpg" alt=""></a></div>
    </div>


    <div class="JingDongSupermarket">
        <!--    京东超市   JingDongSupermarket  -->
        <!--  京东超市里面有 10个小盒子！  -->
        <a href=""><div><img src="img/nav1.webp" alt=""> <span>京东超市</span></div></a>
        <a href=""><div><img src="img/nav2.webp" alt=""> <span>全球购</span></div></a>
        <a href=""><div><img src="img/nav3.webp" alt=""> <span>充值缴费</span></div></a>
        <a href=""><div><img src="img/nav4.png" alt=""> <span>数码电视</span></div></a>
        <a href=""><div><img src="img/nav5.png" alt=""> <span>东京服饰</span></div></a>
        <a href=""><div><img src="img/nav6.png" alt=""> <span>东京生鲜</span></div></a>
        <a href=""><div><img src="img/nav7.png" alt=""> <span>东京到家</span></div></a>
        <a href=""><div><img src="img/nav8.png" alt=""> <span>物流查询</span></div></a>
        <a href=""><div><img src="img/nav9.png" alt=""> <span>领券</span></div></a>
        <a href=""><div><img src="img/nav0.png" alt=""> <span>PLUS会员</span></div></a>
    </div>

    <div class="dailyDraw">
        <!--   Daily draw 每日抽奖-->
        <!--在每日抽奖这个大盒子里面有3个小盒子  分别为：50%  25% 25%-->
        <div><a href="#"><img src="img/new1.dpg" alt=""></a></div>
        <div><a href="#"><img src="img/new2.dpg" alt=""></a></div>
        <div><a href="#"><img src="img/new3.dpg" alt=""></a></div>
    </div>

    <div class="commodity">
    <!--  commodity  商品！    -->
    <div><img src="img/sp1.webp" alt="">
        <span>美的空调/双开门，嵌入式冰箱 保鲜 冷冻 空间大</span>
        <div class="price">
        <!--        price-->
            ￥4999.00<img class="ms" src="img/ms.png" alt="">

        </div>
    </div>

        <div><img src="img/sp2.webp" alt="">
            <span>轻奢高端网红同款马丁靴2021新款春秋网红马丁靴</span>
            <div class="price">
                <!--        price-->
                ￥248.00<img class="ms" src="img/ms.png" alt="">

            </div>
        </div>
        <div><img src="img/sp3.webp" alt="">
            <span>小米12X晓龙870 黄金手感6.28英寸视觉屏幕</span>
            <div class="price">
                <!--        price-->
                ￥2699.00

            </div>
        </div>
        <div><img src="img/sp4.webp" alt="">
            <span>小米路由器4K千兆版 双核cpu 双千兆 1200MB 每秒</span>
            <div class="price">
                <!--        price-->
                ￥129.00

            </div>
        </div>
        <div><img src="img/sp5.webp" alt="">
            <span>FFALCON 雷鸟电视 85英寸鹏5Plus 85S 515刷新率</span>
            <div class="price">
                <!--        price-->
                ￥6999.00

            </div>
        </div>           <div><img src="img/tp7.webp" alt="">
        <span>蜂鸟 无线蓝牙耳机 超长续航 苹果 安卓通用 银线电路 无损音质</span>

        <div class="price">
            <!--        price-->
            ￥899.00<img class="ms" src="img/ms.png" alt="">

        </div>
    </div>       <div><img src="img/tp8.webp" alt="">
        <span>李宁 鸿星尔克 羽毛球拍</span>

        <div class="price">
            <!--        price-->
            ￥169.00

        </div>
    </div>
        <div><img src="img/sp6.webp" alt="">
            <span>蒙牛 呼伦贝尔大草原 现挤 鲜牛奶 180度 超高温杀菌 放心饮用</span>

            <div class="price">
                <!--        price-->
                ￥59.00

            </div>
        </div>
    </div>

</div>



</body>
</html>